/**
* 基础菜单 用户管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="formInline.nick"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button size="small" @click="showAddUser">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="$store.state.loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="id" width="250">
      </el-table-column>
      <el-table-column sortable prop="uid" label="账户" width="150">
      </el-table-column>
      <el-table-column sortable prop="nickName" label="名称" width="150">
      </el-table-column>
      <el-table-column sortable prop="createAt" label="添加时间" width="150">
        <template slot-scope="scope">
          <div>{{ scope.row.createAt | timestampToTime }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="userForm.id ? '修改用户' : '添加用户'"
      :visible.sync="editFormVisible"
      width="60%"
    >
      <el-form ref="form" :model="userForm" label-width="80px">
        <el-form-item label="账号">
          <el-input
            v-model="userForm.uid"
            :readonly="userForm.id"
            placeholder="邮箱或手机号等"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-popconfirm
            title="确认要使用默认密码重置吗？"
            @confirm="resetPwd"
            class="mg-left-10"
          >
            <el-button slot="reference" type="danger" size="mini"
              >重置</el-button
            >
          </el-popconfirm>
          默认密码: s123456</el-form-item
        >
        <el-form-item label="用户名称">
          <el-input v-model="userForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item v-if="userForm.uid">
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetPlatformUsers,
  PlatformUserAdd,
  PlatformUserPwdReset,
} from "../../api/userApi";
export default {
  data() {
    return {
      loading: false,
      editFormVisible: false,
      formInline: {
        page: 1,
        limit: 10,
        nick: "",
      },
      userparm: [],
      listData: [],
      userForm: {
        id: "",
      },
    };
  },
  components: {},
  created() {
    this.getdata();
  },
  methods: {
    getdata(parameter) {
      GetPlatformUsers(parameter).then((res) => {
        this.listData = res;
      });
    },
    showAddUser() {
      this.editFormVisible = true;
      this.userForm = {};
    },
    handleEdit: function (idx, row) {
      this.userForm = row;
      this.editFormVisible = true;
    },
    search() {
      this.getdata(this.formInline);
    },
    closeDialog() {
      this.editFormVisible = false;
    },
    resetPwd() {
      PlatformUserPwdReset(this.userForm).then(() => {
        this.$notify({
          title: "成功",
          message: "重置成功",
          type: "success",
        });
        this.closeDialog();
      });
    },
    onSubmit() {
      PlatformUserAdd(this.userForm).then(() => {
        this.$notify({
          title: "成功",
          message: "添加成功",
          type: "success",
        });
        this.search();
      });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>
